<template>
  <cube-scroll ref="scroll" class="ratings-scroll" :options="scrollOptions">
    <div class="ratings">
      <div class="ratings-header">
        <div class="left">
          <div class="score">3.9</div>
          <div class="score-title">综合评分</div>
          <div class="score-info">高于周边商家69.2%</div>
        </div>
        <div class="right">
          <ul>
            <li><div class="right-info">服务态度</div><star :score="4" :size="36"></star></li>
            <li><div class="right-info">商品评分</div><star :score="4" :size="36"></star></li>
            <li><div class="right-info">送达时间</div><div class="arrive-time">44分钟</div></li>
          </ul>
        </div>
      </div>
      <div class="ratings-detail-container">
        <div class="ratings-title">
          <ratings-select :ratings="ratings" @selectRatingsType="selectRatingsType" :selectType="selectedType" @selectContent="selectContent"></ratings-select>
        </div>
        <div class="ratings-detail">
          <ul>
            <li v-for="(rating,index) in computedRatings" :key="index">
              <div class="head-avatar"><img :src="rating.avatar" alt=""></div>
              <div class="ratings-detail-info">
                  <div class="title">
                    <div class="username">{{ rating.username }}</div>
                    <div class="rate-time">{{ formatTime(rating.rateTime) }}</div>
                  </div>
                  <div class="star">
                    <star :score="4" :size="24"></star>&nbsp;
                    <span>{{ rating.deliveryTime }}分钟送达</span>
                  </div>
                  <div class="desc">{{ rating.text }}</div>
                  <div class="label"></div>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </cube-scroll>
</template>

<script>
import star from 'components/common/star/star'
import ratingsSelect from 'components/common/ratings-select/ratings-select'
import moment from 'moment'

export default {
  name: 'ratings',
  components: {
    star,
    ratingsSelect
  },
  props: {
    data: Object
  },
  data () {
    return {
      ratings: [],
      selectedType: 2,
      isSelectContent: true,
      scrollOptions: {
        click: false,
        directionLockThreshold: 0
      }
    }
  },
  methods: {
    selectRatingsType (type) {
      this.selectedType = type
    },
    selectContent (isSelectContent) {
      this.isSelectContent = isSelectContent
    },
    formatTime (time) {
      return moment(time).format('YYYY-MM-DD HH:mm')
    }
  },
  computed: {
    computedRatings () {
      return this.ratings.filter(item => {
        if (this.selectedType !== 2) {
          if (this.isSelectContent) {
            return item.rateType === this.selectedType && (item.text !== '')
          } else {
            return item.rateType === this.selectedType
          }
        } else {
          if (this.isSelectContent) {
            return item.text !== ''
          } else {
            return true
          }
        }
      })
    }
  },
  watch: {
    data () {
      this.ratings = this.data.ratings
    }
  }
}
</script>

<style lang="stylus" scoped>
@import "~assets/styles/variable.styl"
@import "~cube-ui/src/common/stylus/mixin.styl"
.ratings-scroll
  text-align left
  white-space normal
  height 100%
  .ratings
    background-color $color-background-ssss
    display flex
    flex-direction column
    border-top 2px $color-background-ssss solid
    border-bottom 2px $color-background-ssss solid
    .ratings-header
      padding 18px 0
      background-color $color-white
      flex-direction row
      display flex
      .left
        padding 18px 0
        flex-direction column
        text-align center
        width 36.5%
        border-right 2px $color-background-ssss solid
        .score
          font-size $fontsize-large-xxx
          color rgb(255, 153, 0)
          line-height 28px
        .score-title
          margin-top 6px
          font-size $fontsize-small
          color rgb(7, 17, 27)
          line-height 12px
        .score-info
          margin-top 8px
          font-size $fontsize-small-s
          color rgb(7, 17, 27)
          line-height 10px
      .right
        padding 0 24px
        ul
          li
            display flex
            flex-direction row
            padding 8px 0
            .right-info
              font-size $fontsize-small
              color rgb(7, 17, 27)
              line-height 16px
              margin-right 12px
            .arrive-time
              font-size $fontsize-small
              color rgb(147, 153, 159)
              line-height 18px
    .ratings-detail-container
      margin-top 10px
      background-color $color-white
      .ratings-title
        padding 18px
        padding-bottom 0
      .ratings-detail
        border-top 2px $color-background-ssss solid
        width 100%
        ul
          padding 0 18px
          li
            padding 18px
            display flex
            flex-direction row
            .head-avatar
              display flex
              flex-direction row
              img
                width 28px
                height 28px
                border-radius 50%
            .ratings-detail-info
              display flex
              flex-direction column
              margin-left 12px
              flex 1
              .title
                display flex
                flex-direction row
                justify-content space-between
                .username
                  font-size $fontsize-small-s
                  color $color-black
                  line-height $fontsize-small
                .rate-time
                  font-size $fontsize-small-s
                  font-weight 200
                  color $color-thin-black
                  line-height $fontsize-small
              .star
                display flex
                flex-direction row
                align-items center
                span
                  font-size $fontsize-small-s
                  font-weight 100
                  color $color-thin-black
                  line-height $fontsize-small
              .desc
                margin-top 8px
                font-size $fontsize-small
                color $color-black
                line-height $fontsize-large-x
</style>
